<template>
    <div class="b-root">
        <div class="b-box" v-for="item in list">
            <router-link :to="'/hello/xianshi/'+item.id+'/'+item.album.id">
                <div class="top">
                    <img :src='item.photo.path' />
                    <h1>{{item.msg}}</h1>
                    <span>★ {{item.favorite_count}}</span>
                </div>
                <div class="bot">
                    <div class="imgbox">
                        <img :src='item.sender.avatar' />
                    </div>
                    <div class="a-box">
                        <a>{{item.sender.username}}</a>
                        <br/>
                        <span>收集到 {{item.album.name}}</span>
                    </div>
                </div>
            </router-link>
        </div>
    </div>
</template>

<script>
export default {
    props: ['list']
}
</script>

<style scoped>
.b-root {
    box-sizing: border-box;
    width: 100%;
    padding: 15px 5px 5px 5px;
    display: flex;
    flex-wrap: wrap;
    background-color:#F5F5F5;
}

.b-box {
    width: 48%;
    margin: 2px;
    /*float: left;*/
    box-sizing: border-box;
    padding: 3px;
    background-color: white;
}

h1 {
    color: #737373;
    font-size: 12px;
    margin: 2px;
}

.top span {
    color: #737373;
    font-size: 10px;
}

.bot {
    display: flex;
    border-top: 0.5px solid grey;
}

.imgbox {
    width: 40px;
    height: 40px;
    margin: 5px;
}

.bot img {
    line-height: 0px;
    border-radius: 50%;
}

.bot span {
    font-size: 12px;
    color: #4B4B4B;
}
.a-box a{
font-size: 12px;
color: blue;
}
</style>
